<!--个人信息 -->
<template>
	<div class="contact">
		<div class="usermsg">
			<div class="usermsgr flex">
				<div class="usermsgreach flex" style="margin-right:40px;">
					<span class="usermsgreacht">账号：</span>
					<input class="usermsgreachi" disabled v-model="mobile" type="text" placeholder="请输入当前账号~">
				</div>
				<div class="usermsgreach flex">
					<span class="usermsgreacht">新密码：</span>
					<input class="usermsgreachi" v-model="pass" type="password" placeholder="请输入新密码~">
				</div>
			</div>
			<div class="usermsgr flex">
				<div class="usermsgreach flex" style="margin-right:40px;">
					<span class="usermsgreacht">确认密码：</span>
					<input class="usermsgreachi" style="width:385px;" v-model="twopass" type="password" placeholder="请输入再次确认新密码~">
				</div>
			</div>
		</div>
		<div class="enter" style="margin: 37px auto;" @click="enter()">
			<el-button class="enter mainbg">保存</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				mobile:'',
				pass:'',
				twopass:'',
				userinfo:{}
			}
		},
		mounted(){
			this.userinfo = this.$store.state.UserInfo;
			this.mobile = this.userinfo.mobile;
		},
		methods:{
			enter(){
				let sendData = {
					mobile:this.mobile,
					password:this.pass,
					password_confirm:this.twopass
				}
				this.apifun.$post('/pc/User/setPassword',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.$router.push('/login')
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.usermsg{
		width:93%;
		margin: 10px auto;
		min-width: 570px;
		padding:25px 2% 30px;
		border-radius:10px;
		background-color: var(--bgColor);
		box-shadow: 0 5px 5px var(--boxShowColor);
	}
	.usermsgl{
		width: 70px;
		.usermsgl-img{
			width: 70px;
			height: 70px;
			.usermsg-headimgav{
				width: 70px;
				height: 70px;
				border-radius:10px;
			}
		}
		.usermsgl-imgbtn{
			width: 70px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			border-radius:50px;
			color:#fff;
			font-size:12px;
			margin-top: 6px;
		}
	}
	.usermsgr{
		margin-left: 20px;
		.usermsgreach{
			margin-top: 20px;
			.usermsgreacht{
				font-size:12px;
				color: #333;
				line-height:30px;
				font-weight: bold;
			}
			.usermsgreachi{
				padding: 0px 10px;
				width: 150px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: #333;border: none;
				background-color: #fff;
				border-radius: 5px;
				outline:none;
			}
		}
	}
	.enter{
		width:340px;
		height: 48px;
		color: #fff;
		font-size:18px;
		text-align: center;
		border-radius:10px;
	}
	.enter:hover{
		color: #fff;
	}
</style>